<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Canvas</title>
  <link rel="stylesheet" href="./../css/style.css">
</head>
<body>
<main class="clearFix">
  <div class="contentWrap fl">
    transform(m11, m12, m21, m22, dx, dy) <br>
    允许对变形矩阵直接修改。<br>
    <div class="noteTwo">
      m11 m21 dx <br>
      m12 m22 dy <br>
      0 0 1 <br>
    </div>
    <div>
      如果任意一个参数是无限大，变形矩阵也必须被标记为无限大，否则会抛出异常。
      <br>
      这个函数的参数各自代表如下：
      <br>
      m11：水平方向的缩放 Horizontal scaling.
      <br>
      m12：水平方向的倾斜偏移 Horizontal skewing.
      <br>
      m21：竖直方向的倾斜偏移 Vertical skewing.
      <br>
      m22：竖直方向的缩放 Vertical scaling.
      <br>
      dx：水平方向的移动 Horizontal moving.
      <br>
      dy：竖直方向的移动 Vertical moving.
    </div>
    <hr>
    <div>
      setTransform(m11, m12, m21, m22, dx, dy) <br>
      <p>
        这个方法会将当前的变形矩阵重置为单位矩阵，然后用相同的参数调用 transform
        方法。如果任意一个参数是无限大，那么变形矩阵也必须被标记为无限大，否则会抛出异常。从根本上来说，该方法是取消了当前变形,然后设置为指定的变形,一步完成。
      </p>
    </div>
    <hr>
    <div>
      resetTransform() <br>
      重置当前变形为单位矩阵，它和调用以下语句是一样的：
      <span class="noteTwo">
        ctx.setTransform(1, 0, 0, 1, 0, 0);
      </span>
    </div>

  </div>
  <div class="contentWrap fr">
    <div id="canvas" class="wrap_400">

    </div>

    <div id="canvas2" class="wrap_400">

    </div>
  </div>
</main>
</body>
</html>

<script src="./../js/CanvasCtx.js"></script>
<script>

  /*------------------------------------------
   * transform(m11, m12, m21, m22, dx, dy)
   * m11：水平方向的缩放 Horizontal scaling.
   * m12：水平方向的倾斜偏移 Horizontal skewing.
   * m21：竖直方向的倾斜偏移 Vertical skewing.
   * m22：竖直方向的缩放 Vertical scaling.
   * dx：水平方向的移动 Horizontal moving.
   * dy：竖直方向的移动 Vertical moving.
   -------------------------------------------*/
  !function draw() {
    let ctx = new CanvasCtx('#canvas').ctx;

    let sin = Math.sin(Math.PI / 6);
    let cos = Math.cos(Math.PI / 6);

    ctx.strokeStyle = '#f00';

    ctx.translate(200, 200); // 坐标系移动
    let c = 0;
    for (let i = 0; i <= 12; i++) {
      c = Math.floor(255 / 12 * i);
      ctx.fillStyle = `rgb(${c},${c},${c})`;
      ctx.fillRect(0, 0, 100, 10);
      ctx.strokeRect(0, 0, 100, 10);
      ctx.transform(cos, sin, -sin, cos, 0, 0); // 变换
      // console.log(i, '----', cos, sin, -sin, cos, 0, 0)
    }


    ctx.setTransform(-1,0,0,1,100,100);
    ctx.fillStyle = 'rgba(255,128,255,0.5)';
    ctx.fillRect(0, 0, 100, 100);

  }();

  !function test() {
    console.log(Date.now());
    let ctx = new CanvasCtx('#canvas2').ctx;
    ctx.fillStyle = '#fb0';
    ctx.fillRect(0, 0, 200, 200);

    ctx.save();
    ctx.fillStyle = '#f0f';
    // ctx.transform(1,0,0,1,100,100);
    // ctx.transform(0,1,1,0,100,100);
    ctx.transform(1, 0, 0, 1, 0, 0);
    ctx.fillRect(0, 0, 100, 100);

  }();

</script>












